<template>
    <div>
        <viewer :images="images" @inited="inited" class="viewer" ref="viewer">
            <template #default="scope">
                <div class="post-pic-area fhs">
                    <img v-for="src in scope.images" :src="src" :key="src" class="post-pic">
                </div>
                <!-- {{ scope.options}} -->
            </template>
        </viewer>
    </div>
</template>
<script lang="ts" setup>
import {defineComponent, ref} from 'vue'
import 'viewerjs/dist/viewer.css'
import {component as Viewer} from "v-viewer"
const props = defineProps({images: Array<String>})
let $viewer: any
let inited = function (viewer: any) {
    $viewer = viewer
}

</script>
<style lang="scss">
.viewer {
    .post-pic-area {
        gap: 8px;
        margin-bottom: 8px;

        .post-pic {
            width: 120px;
            height: 80px;
            object-fit: contain;
            background-color: #eee;

        }
    }

    img:hover {
        cursor: zoom-in;
        /* cursor: -webkit-zoom-in; */
    }
}
</style>
